<template>
  <div>
    <!-- row01 -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="font-size: 12px;color: #999999;">用户名</div>
      <div style="font-size: 12px;color: #333333;margin-left: 12px;">待定</div>
    </div>
    <!-- row02 -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="font-size: 12px;color: #999999;">渠道来源</div>
      <div style="font-size: 12px;color: #333333;margin-left: 12px;">待定</div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">姓名</div>
        <van-field
          type="text"
          v-model="data.stuName"
          placeholder="请输入"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>
    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">名字</div>
        <van-field
          type="text"
          v-model="data.givenName"
          placeholder="请输入"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">姓</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.surname"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>
    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">性别</div>
        <div @click="sexshow=true">
          <van-field
            type="text"
            readonly
            placeholder="请选择"
            v-model="data.sexname"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">证件类型</div>
        <div @click="documenttypeshow = true">
          <van-field
            type="text"
            readonly
            placeholder="请选择"
            v-model="data.papersTypeName"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>

      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">证件号</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.paperNum"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">出身地</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.birthAdd"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">国籍</div>
        <div @click="willShowGJPop(0)">
          <van-field
            type="text"
            readonly
            placeholder="请选择"
            v-model="data.nationality"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
    </div>
    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">联系地址</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.relaAdd"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">跟进进度</div>
        <div @click="gjjd_show = true">
          <van-field
            type="text"
            readonly
            placeholder="意向强度"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">签证类型</div>
        <!-- 只能是1或者0 是选择 -->
        <div @click="visashow = true">
          <van-field
            type="text"
            readonly
            placeholder="请选择"
            v-model="data.visaTypeName"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">电话</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.localPhone"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">海外电话</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.osPhone"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">Email</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.email"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">备用Email</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.backEmail"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">最高学历</div>
        <van-field
          type="text"
          readonly
          placeholder="请选择"
          v-model="data.eduType"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>

    <!-- address -->
    <div style="padding: 0 12px 6px 12px;font-size: 14px;background-color: #FFFFFF;">国籍所在地永久居住地址</div>
    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">开始居住时间</div>
        <div @click="livedateshow = true">
          <van-field
            type="text"
            placeholder="请输入"
            v-model="data.liveBtime"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">国家</div>
        <div @click="willShowGJPop(1)">
          <van-field
            type="text"
            readonly
            placeholder="请选择"
            v-model="data.country"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">省/州</div>
        <div @click="sfshow=  true">
          <van-field
            type="text"
            readonly
            placeholder="请选择"
            v-model="data.province"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">城市</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.city"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">地址</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.addDetail"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">邮编</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.postalCode"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>

    <!-- 紧急联系人 -->
    <div style="padding: 0 12px 6px 12px;font-size: 14px;background-color: #FFFFFF;">紧急联系人</div>
    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">姓名</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.urgName"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">关系</div>
        <div @click="familyshipshow = true">
          <van-field
            type="text"
            readonly
            placeholder="请选择"
            v-model="data.urgRelativeName"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">使用语言</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.urgLag"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
      <!-- line -->
      <div style="width: 5px;" />
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">电话</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.urgPhone"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>

    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">Email</div>
        <van-field
          type="text"
          placeholder="请输入"
          v-model="data.urgEmail"
          style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
        />
      </div>
    </div>

    <div style="padding: 12px;background-color: #FFFFFF;padding-bottom: 40px;">
      <div
        @click="btnClick"
        style="border: 1px solid #007AFF;text-align: center;padding: 5px;border-radius: 4px;color: #007AFF;font-size: 14px;"
      >
        下一步
      </div>
    </div>
    <!-- gender -->
    <van-action-sheet
      v-model="sexshow"
      description="性别"
      :actions="sexs"
      @select="sexselect"
      cancel-text="取消"
    />
    <!-- papersType -->
    <van-action-sheet
      v-model="documenttypeshow"
      description="证件类型"
      :actions="documentTypes"
      @select="documenttypesselect"
      cancel-text="取消"
    />
    <!-- live date -->
    <van-calendar
      :min-date="minDate"
      :show-confirm="false"
      color="#1989fa"
      v-model="livedateshow"
      @confirm="livedateHandle"
      position="right"
    />
    <!-- family ship -->
    <van-action-sheet
      v-model="familyshipshow"
      description="关系"
      :actions="familyshops"
      @select="familyshipselect"
      cancel-text="取消"
    />
    <!-- 签证 -->
    <van-action-sheet
      v-model="visashow"
      description="签证类型"
      :actions="visaTypes"
      @select="visaselect"
      cancel-text="取消"
    />
    <van-action-sheet
      v-model="gjjd_show"
      description="跟进进度"
      :actions="gjjds"
      @select="gjjd_select"
      cancel-text="取消"
    />

    <!-- 国家 -->
    <van-popup
      v-model="gjshow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        title="国家"
        :columns="showgjlist"
        @confirm="gjConfirm"
        @cancel="gjshow = false"
        show-toolbar
      />
    </van-popup>
    <!-- 省份 -->
    <van-popup
      v-model="sfshow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        title="省/州"
        :columns="showsflist"
        @confirm="sfConfirm"
        @cancel="sfshow = false"
        show-toolbar
      />
    </van-popup>
  </div>
</template>

<script>
import { fetchContry, fetchProvince } from "../../../api/person";
export default {
  props: ["data"],
  data() {
    return {
      minDate: new Date(1950, 0, 1),
      livedateshow: false,

      sexshow: false,
      sexs: [],
      //证件类型
      documenttypeshow: false,
      documentTypes: [],
      //联系人关系
      familyshipshow: false,
      familyshops: [],
      //签证
      visashow: false,
      visaTypes: [],

      gjjd_show: false,
      gjjds: [],

      gjshow: false,
      sfshow: false,
      showgjlist: [], //国家list
      showsflist: [], //省份list
      gjlist: [], //国家list
      sflist: [], //省份list
      selectedgj: undefined, //选择的国家
      selectedsf: undefined, //选择的省份

      flag: 0, //出生地国家0 居住地国家1

      // data: {
      // 	"actHead": "", //	市场负责人
      // 	"addDetail": "", //	详细地址
      // 	"asdHead": "", //	ASD负责人
      // 	"backEmail": "", //	备用邮箱
      // 	"birthAdd": "", //	出身地
      // 	"chnName": "", //	渠道名
      // 	"chnSource": "", //	渠道来源
      // 	"city": "", //	城市
      // 	"colAdd": "", //	就读大学省市区
      // 	"colBtime": "", //	大学入学时间
      // 	"colCredit": "", //	大学已修学分
      // 	"colCty": "", //	就读大学国家
      // 	"colDegree": "", //	大学毕业学位
      // 	"colEduCredit": "", //	大学毕业学分
      // 	"colEtime": "", //	大学预计毕业时间
      // 	"colMinorPro": "", //	大学辅修专业
      // 	"colName": "", //	大学校名
      // 	"colPga": "", //	目前PGA
      // 	"colReadPro": "", //	大学就读专业
      // 	"country": "", //	国家
      // 	"createBy": "", //	创建人
      // 	"createTime": "", //	创建时间
      // 	"dateBirth": "", //	出生日期
      // 	"deleted": "", //	逻辑删除
      // 	"eduType": "", //	最高学历
      // 	"email": "", //	邮箱
      // 	"engLevel": "", //	英语等级
      // 	"engScore": "", //	英语等级分数
      // 	"engTime": "", //	英语等级考试时间
      // 	"followRate": "", //	跟进周期
      // 	"givenName": "", //	名
      // 	"headUrl": "", //	头像地址
      // 	"hschBtime": "", //	高中入学时间
      // 	"hschCity": "", //	高中城市
      // 	"hschCty": "", //	就读高中国家
      // 	"hschEtime": "", //	高中毕业时间
      // 	"hschlName": "", //	高中学校名
      // 	"id": "", //	ID
      // 	"interDegree": "", //	意向程度
      // 	"liveBtime": "", //	国籍所在地开始居住时间
      // 	"livePostCode": "", //	永久居住地邮编
      // 	"localPhone": "", //	国内电话
      // 	"nationality": "", //	国籍
      // 	"openid": "", //	微信openid
      // 	"osPhone": "", //	海外电话
      // 	"paperNum": "", //	证件号码
      // 	"papersType": "", //	证件类型1:身份证2:护照号
      // 	"postalCode": "", //	邮编号
      // 	"province": "", //	省份
      // 	"purpose": "", //	意向信息,以JSON字符串数组如[{’id’:’新增默认传0’,’school’:’意向学校’,’project’:’意向项目’,’course’:’意向课程,’authStatus’:’课程认证状态,’认证截图地址’:’authUrl,’failCause’:’失败原因’}]
      // 	"relaAdd": "", //	联系地址
      // 	"remark": "", //	备注
      // 	"saleHead": "", //	销售负责人
      // 	"sex": "", //	性别:1男2女
      // 	"stuName": "", //	姓名
      // 	"surname": "", //	姓
      // 	"transcriptAdd": "", //	纸质与电子成绩单地址,以JSON字符串数组如[{’id’:’新增默认传0’,’postalCode’:’邮编’,’recName’:’收件人’,’recPhone’:’收件人电话’,’recAdd’:’收件人地址’,’tranType’:’地址类型:1纸质2电子’,’email’:’邮箱’,’backEmail’:’备用邮箱’}]
      // 	"unionid": "", //	微信unionid
      // 	"updateBy": "", //	修改人
      // 	"updateTime": "", //	修改时间
      // 	"urgEmail": "", //	紧急联系人邮箱
      // 	"urgLag": "", //	紧急联系人使用语言
      // 	"urgName": "", //	紧急联系人姓名
      // 	"urgPhone": "", //	紧急联系人电话
      // 	"urgRelative": "", //	紧急联系人关系
      // 	"visaType": "", //	签证类型
      // }
    };
  },
  mounted() {
    let arr = [];
    arr = global.dictList;

    for (const obj of arr) {
      if (obj.code == "sex") {
        //联系人关系
        this.sexs.push({ value: obj.value, name: obj.label });
      }
      if (obj.code == "emg_contact") {
        //联系人关系
        this.familyshops.push({ value: obj.value, name: obj.label });
      }
      if (obj.code == "visa_type") {
        //签证
        this.visaTypes.push({ value: obj.value, name: obj.label });
      }
      if (obj.code == "document_type") {
        //证件
        this.documentTypes.push({ value: obj.value, name: obj.label });
      }
      if (obj.code == "gjjd") {
        //跟进进度interDegree
        this.gjjds.push({ value: obj.value, name: obj.label });
      }
    }
    console.warn(this.familyshops);

    this.netFetchContry();
  },
  methods: {
    btnClick() {
      this.$emit("action");
    },

    netFetchContry() {
      let self = this;
      fetchContry().then((res) => {
        let { code, data, msg } = res;
        if (code == 200) {
          self.gjlist = data["record"];
          self.showgjlist = self.gjlist.map((e) => e.name);
        } else {
          self.$toast(msg);
        }
      });
    },
    netFetchProvince(pid) {
      let fi = {
        parent: pid,
      };
      let self = this;
      fetchProvince(fi).then((res) => {
        let { code, data, msg } = res;
        if (code == 200) {
          self.sflist = data["record"];
          self.showsflist = self.sflist.map((e) => e.name);
        } else {
          self.$toast(msg);
        }
      });
    },

    sexselect(item) {
      let { value, name } = item;
      this.data.sex = value;
      this.data.sexname = name;
      this.sexshow = false;
    },
    documenttypesselect(item) {
      let { value, name } = item;
      this.data.papersType = value;
      this.data.papersTypeName = name;
      this.documenttypeshow = false;
    },
    familyshipselect(item) {
      let { value, name } = item;
      this.data.urgRelative = value;
      this.data.urgRelativeName = name;
      this.familyshipshow = false;
    },
    visaselect(item) {
      let { value, name } = item;
      this.data.visaType = value;
      this.data.visaTypeName = name;
      this.visashow = false;
    },
    gjjd_select(item) {
      let { value, name } = item;
      this.gjjd_show = false;
    },

    formatDate(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}-${month}-${day}`;
    },

    livedateHandle(date) {
      this.data.liveBtime = this.formatDate(date);
      this.livedateshow = false;
    },

    willShowGJPop(flag) {
      this.flag = flag;
      this.gjshow = true;
    },

    gjConfirm(txt, idx) {
      this.gjshow = false;
      if (this.flag == 0) {
        this.data.nationality = txt;
      } else {
        let { id } = this.gjlist[idx];
        this.netFetchProvince(id);
        this.data.country = txt;
      }
    },
    sfConfirm(txt, idx) {
      this.sfshow = false;
      let obj = this.sflist[idx];
      this.data.province = txt;
    },
  },
};
</script>

<style scoped>
van-field {
  border: none;
}
</style>>

</style>